<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="paryorder-content">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true">
			<template #top>
				<view class=""style="background-color: #FFFFFF;">
					<u-navbar :border-bottom="false" title="生成收款单" :title-size="36" :title-bold="true" :title-color="textColor">
					</u-navbar>
					<view class="search-container">
						<u-search input-align="center" placeholder="输入订单号搜索" @clear="searchOrderFn" @search="searchOrderFn" height="70" animation v-model="searchValue"></u-search>
					</view>
				</view>
			</template>
			
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="payorder-container" >
					<u-checkbox-group :wrap="true" :size="40" :icon-size="20" :label-disabled="true" shape="circle" :active-color="themeColor">
						<u-checkbox
							v-model="item.isSelect" 
							v-for="item in dataList" :key="item.id" 
							:name="item.id"
							:disabled="item.isDisabled"
							class="check-container"
						>
							<view class="payorder-section">	
								<view class="section-list">
									<view class="section-item">
										<view class="section-item-text">
											<view class="section-item-name">
												{{item.tradeNo}}
											</view>
											<view class="section-item-status">
												<text style="font-size: 24rpx;color: #999999;">{{item.createdTime}}</text>
												<text style="font-size: 24rpx;color: #FF551A;margin-left: 30rpx;">{{orderStatus[item.state]}}</text>
											</view>
										</view>
										<view class="section-item-price">
											￥{{item.actualAmount}}
										</view>
									</view>
								</view>
							</view>
						</u-checkbox>
					</u-checkbox-group>
			</view>
			<template #bottom>
				<view class="create-footer"  >
					<u-checkbox v-model="allChecked" :size="40" :icon-size="20" shape="circle" :active-color="themeColor">全选</u-checkbox>
					<view class="create-footer-rt">
						<view class="create-footer-total">
							合计：<text style="font-size: 32rpx;
						font-weight: bold;
						color: #FF551A;">{{totalPrice}}</text>
						</view>
						<view class="create-footer-btn" @click="creatdPayOrderFn">
							{{payorderId==''?'创建收款单':'添加到收款单'}}
						</view>
					</view>
				</view>
			</template>
			
		</z-paging>
		<u-toast ref="uToast" />
		<u-modal v-model="successShow" :content="content" confirm-text="查看收款单" cancel-text="继续新建" @confirm="goPayOrderDetails" @cancel="searchOrderFn"></u-modal>
	</view>
</template>

<script>
	import { useShopStore } from '@/store/shop.js';
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				allChecked:false,
				shopId:'',
				orderStatus:['待确认','待发货','待收货','待评价','已完成','已取消'],
				searchValue:'',
				successShow:false,
				content:'创建收款单成功！',
				payorderId:'',
				nowTradeList:[],
				orderId:'',
				routeFrom:''
			}
		},
		onLoad(options) {
				this.shopId = options.shop;
				if(options.payorderId!==undefined&&options.payorderId!=='undefined'){
					this.payorderId = options.payorderId;
					this.nowTradeList = JSON.parse(options.trades)
				}
				if(options.routeFrom == 'order'){
					this.orderId = options.orderId;
					this.routeFrom = options.routeFrom;
				}
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'}),
			...mapState(useUserStore, ['']),
			totalPrice(){
				let total = 0;
				let that = this;
				this.dataList.forEach(item=>{
					if(item.isSelect){
						total = that.addFn(total,item.actualAmount)
					}
				})
				return '￥'+total;
			}
		},
		watch:{
			allChecked(val,oldval){
				this.dataList.forEach(item=>{
					if(!item.isDisabled){
						item.isSelect = val;
					}
				});
			}
		},
		created(){
			// this.$refs.paging.reload();
		},
		methods: {
			addFn(a,b){
			  return this.$mHelper.add(a,b)
			},
			goPayOrderDetails(){
				
			},
			searchOrderFn(){
				this.$refs.paging.reload();
				this.allChecked = false;
			},
			async creatdPayOrderFn(){
				if(!this.$store.getters['user/isCollection']){
					return this.$u.toast('当前账号没有创建收款单的权限')
				}
				let chooseIdList = [];
				this.dataList.forEach(item=>{
					if(item.isSelect){
						chooseIdList.push(item.id)
					}
				})
				uni.showLoading({
					title: 'loading...',
				});
				if(chooseIdList.length === 0){
					uni.hideLoading({
						title: 'loading...'
					})
					this.$refs.uToast.show({
						title: '订单选择不得为空',
						type: 'warning',
						position:'bottom'
					});
					return false;
				}
				let params = {
					tradeIds:this.payorderId!=''?this.nowTradeList.concat(chooseIdList):chooseIdList,
					isSeller:false,
					shopId:this.storeShop.id,
				}
				console.log(params);
				let res;
				if(this.payorderId!=''){
					params.id = this.payorderId
					res = await this.$newHttp.put('api/TradePayment/Update', params);
				}else{
					res = await this.$newHttp.post('api/TradePayment/Create', params);
				}
				uni.hideLoading({
					title: 'loading...'
				})
				if(res.code == 200){
					// this.successShow = true;
					if(this.routeFrom == 'order'){
						this.$mRouter.redirectTo({
							route: '/pages/sale/order/details?id='+this.orderId
						})
					}else{
						this.$mRouter.redirectTo({
							route: '/pages/sale/payorder/details?id='+res.data.id,
						})
					}
				}else{
					this.$refs.uToast.show({
						title: '创建收款单失败，失败原因：'+res.erroMessage,
						type: 'error',
						position:'bottom'
					});
				}
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					currentShopId:this.storeShop.id,
					IsSeller:true,
					filterShopId:this.shopId
				}
				if(this.routeFrom == 'order'){
					params.currentTradeId = this.orderId;
				}
				if(this.searchValue!=''){
					params.tradeNo = this.searchValue;
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.get('api/TradePayment/GetUnpaidTradesByPage', { params: params } );
				uni.hideLoading({
					title: 'loading...'
				})
				if(res.code === 200){
					this.$refs.paging.complete(res.data.list);
				}else{
					this.$refs.paging.complete(false);
				}
			},
		}
	}
</script>
<style lang="scss" >
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.paryorder-content {
		height: 100%;
		background-color: #f8f8f8;
		.search-container{
			box-sizing: border-box;
			padding: 10rpx 32rpx 30rpx;
			border-bottom: solid 1px #eaeaea;
		}
	}
	.payorder-container{
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 35rpx;
		.check-container{
			::v-deep .u-checkbox__label{
				width: 100%;
			}
		}
		
		.payorder-header{
			display: flex;
			justify-content: space-between;
		}
		.payorder-section{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;
			padding:20rpx 0;
			border-bottom: solid 1px #eaeaea;
			.section-image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.section-list{
				flex: 1;
				margin-left: 20rpx;
				
				.section-item{
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					.section-btn{
						width: 100rpx;
						margin: 0;
						height: 50rpx;
					}
					.section-item-price{
						font-size: 32rpx;
						font-weight: bold;
						color: #FF551A;
					}
				}
			}
			
		}
		
	}
	
	.create-footer{
		box-sizing: border-box;
		padding: 30rpx 35rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.create-footer-rt{
			display: flex;
			align-items: center;
			
			.create-footer-btn{
				background: linear-gradient(-90deg, #FFBB1A, #FFBB1A);
				box-sizing: border-box;
				padding:26rpx 42rpx;
				border-radius: 50rpx;
				color: #333;
				margin-left: 20rpx;
			}
		}
	}
</style>
